<!-- 
作者:wisher
时间:2023/6/24
页面:视频页

时间:2023/6/26
内容:优化选集UI,增加评论系统适配云开发
 -->
<template>
	<view>
		<view class="status_bar"></view>
		<view style="position: relative;display: flex;" id="player">
			<video @play="played" @timeupdate='timeupdate' @controlstoggle="(e)=>{showControls=e.detail.show}"
				:src="info?playurl:''" class="myVideo" id="myVideo" @error="videoErrorCallback" controls
				show-fullscreen-btn enable-play-gesture enable-play-gesture :play-strategy='2'></video>

			<cover-image style="position: absolute;left: 30rpx;top: 30rpx;width: 50rpx;height: 50rpx;z-index: 999;"
				@click="backPage" src="/static/back.png"></cover-image>
		</view>
		<view style="width: 100vw;overflow-y: scroll;position: relative;min-height: 50vh;" id="cps"
			:style="playerReact?`height:calc(100vh - ${playerReact.top}px)`:''">
			<view style="width: 100vw;position: sticky;top: 0;left: 0;background: #fff;z-index: 3;">
				<view style="display: flex;align-items: center;padding:20rpx 30rpx;">
					<view v-for="(v,i) in showtabs" :key='v.name' style="padding-right: 40rpx;" @click="infoIndex=i"
						class="tabpage" :class="{'tabpage_in':i==infoIndex}">
						{{v.name}}
					</view>
				</view>
			</view>
			<view v-show="infoIndex==0" v-if="info&&playerReact" style="position: relative;">
				<view style="padding:20rpx 30rpx;" @click="showInfo = true">
					<p style="font-size: 35rpx;font-weight: 800;padding-bottom: 10rpx;color: rgb(3, 0, 35);">
						{{info.vod_name}}
					</p>
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view
							style="font-size: 25rpx;color: #999;padding-bottom: 20rpx;display: flex;align-items: center;">
							{{info.vod_remarks}}
							<span style="padding-right: 10rpx;"></span>{{info.type_name}}
							<span style="padding-right: 10rpx;"></span>{{info.vod_year}}
							<span style="padding-right: 10rpx;"></span>
							<view style="display: flex;align-items: center;">
								<view style="color: #999;">简介</view>
								<uni-icons color="#999" type="forward" size="30rpx"></uni-icons>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="padding: 0 0 40rpx;" v-if="false">
					<view style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx;">
						<view style="flex-shrink: 0;">
							<uni-icons type="star" color='#222' size="70rpx"></uni-icons>
						</view>
						<view style="width: 100%;font-size: 25rpx;padding-left: 20rpx;">
							<p style="font-weight: 800;color: #222;">评分 {{info.vod_score}}</p>
							<p style="color: #999;font-size: 22rpx;">共{{info.vod_score_all}}人评分</p>
						</view>
						<view style="flex-shrink: 0;">
							<uni-icons color='#222' type="download" size="60rpx"></uni-icons>
						</view>
						<view style="flex-shrink: 0;padding-left: 30rpx;">
							<uni-icons color='#222' type="redo" size="60rpx"></uni-icons>
						</view>
					</view>
				</view>
				<view>
					<view @click="showList=true" style="padding: 10rpx 30rpx 20rpx;">
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<view style="font-weight: 800;font-size: 30rpx;color: rgb(3, 0, 35);">选集</view>
							<view><uni-icons color="#999" type="forward" size="25rpx"></uni-icons></view>
						</view>
						<view style="font-size: 25rpx;color: #999;">{{info.vod_remarks}}</view>
					</view>

					<uv-tabs :list="info.vod_play_url" lineColor="rgba(0,0,0,0)" :activeStyle="{
								background:`#e5f9f8`,
								color: `rgb(16,174,170)`,
								fontSize:'30rpx',
								padding:`15rpx 20rpx`,
								borderRadius:`10rpx`
					    	}" :inactiveStyle="{
								color: `#666`,
								background:`#f6f6f6`,
								fontSize:'30rpx',
								padding:`15rpx 20rpx`,
								borderRadius:`10rpx`
							}" :customStyle="{ padding:`0 30rpx` }" itemStyle="padding:0 10rpx" @change="(i)=>{playIn(i)}"
						:current="playindex">
					</uv-tabs>
				</view>
				<view style="padding: 40rpx 0;" v-if="sameVideos!=null">
					<view style="padding: 10rpx 00rpx 20rpx;">
						<view
							style="display: flex;align-items: center;justify-content: space-between;padding: 0 30rpx 20rpx;">
							<view style="font-weight: 800;font-size: 30rpx;color: rgb(3, 0, 35);">相似推荐</view>
						</view>
						<view class="vList" v-if="sameVideos.length>0">
							<view class="vListItem" v-for="(v,index) in sameVideos" :key="index" @click="toInfoPage(v)">
								<image lazy-load class="itemImage" :src="v.vod_pic" mode="aspectFill">
									<view class="itemInfo">
										<p class="itemIns">{{v.vod_class}}</p>
										<p class="itemTittle">{{v.vod_name}}</p>
									</view>
									<view v-if="showH5Tips==2"
										style="position: absolute;left: 0;top: 0;background: rgba(0,0,0, 0.5);color:#fff;border-radius:0 0 20rpx 0;padding: 0rpx 10rpx;font-size: 25rpx;">
										APP
									</view>
								</image>
							</view>
						</view>
						<view v-else class="vList">
							<view class="vListItem" v-for="(v,index) in 20" :key="index">
								<uv-skeleton avatarSize="50vw" :loading="true" avatar avatarShape="square">
								</uv-skeleton>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="infoIndex==1">
				<uv-empty v-if="Comments.length==0" mode="comment"
					icon="https://cdn.uviewui.com/uview/empty/comment.png"></uv-empty>
				<view v-else>
					<view v-for="c in Comments">
						<view style="padding:25rpx 30rpx;padding-bottom: 50rpx;">
							<view style="display:flex;align-items: center;">
								<view
									style="width: 50rpx;height: 50rpx;flex-shrink: 0;border-radius: 50%;overflow: hidden;flex-shrink: 0;">
									<image style="width: 100%;height: 100%;" :src="c.avatarUrl" mode="">
									</image>
								</view>
								<view style="color: #333;width: 100%;padding: 0 20rpx;font-size: 25rpx;">
									{{c.username}}
								</view>
								<view style="color: #666;flex-shrink: 0;font-size: 25rpx;">
									{{timeFormat(c.date,"yyyy-MM-dd hh:mm")}}
								</view>
							</view>
							<view style="width: 100%;padding-top: 20rpx;">
								<rich-text style="color: #000;font-size: 30rpx;" :nodes="c.com"></rich-text>
							</view>
						</view>
						<view style="height: 15rpx;background: #f8f8f8;width: 100vw;"></view>
					</view>
					<view style="padding-bottom: 80rpx;"></view>
				</view>
				<view
					style="position: fixed;bottom: 0;left: 0;width: 100vw;background: #fff;border-top: 1px solid #eee">
					<view @click="popCommentBox"
						style="margin:20rpx 30rpx 10rpx;border-radius: 30rpx;background: #eee;padding: 10rpx 20rpx;;">
						<view style="font-size: 25rpx;color: #999;">说点什么吧 ~ </view>
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="showPostComment" @change="e=>{showPostComment = e.show}">
			<view style="position: fixed;bottom: 0;left: 0;width:100vw;background: #fff;"
				:style="Keyboard?`bottom:${Keyboard.height}px;`:''">
				<view style="padding: 20rpx 30rpx;">
					<view style="display: flex;align-items: flex-end;font-size: 25rpx;">
						<view style="border-radius: 15rpx;background: #eee;padding: 10rpx 20rpx;width: 100%;">
							<textarea style="width: 100%;" @blur="showPostComment = false" :adjust-position="false"
								auto-height focus auto-focus placeholder="输入您想发送的内容" :show-confirm-bar="false"
								confirm-type='send' v-model="Comment" />
						</view>
						<view @click="postComment"
							style="background:#0dd;color:#fff;border-radius: 40rpx;padding: 10rpx 20rpx;flex-shrink: 0;margin-left: 20rpx;">
							发 送</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<uv-popup v-if="info" ref="showInfo" :overlay="false" :safeAreaInsetBottom="false" style="z-index: 999;">
			<view :style="playerReact?`height:calc(100vh - ${playerReact.top}px)`:''" style="height: 100vh;">
				<view class="poptittle" @click="showInfo=false">
					<view class="module_tittle">{{info.vod_name}}</view>
					<view><uni-icons type="bottom" size="40rpx"></uni-icons></view>
				</view>
				<view style="padding:0 30rpx;">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view style="font-size: 25rpx;color: #666;padding-bottom: 20rpx;">
							{{info.vod_remarks}}
							<span style="padding-right: 10rpx;"></span>{{info.type_name}}
							<span style="padding-right: 10rpx;"></span>{{info.vod_year}}
						</view>
					</scroll-view>
					<!-- <scroll-view class="scroll-view_H" scroll-x="true">
						<view style="font-size: 25rpx;color: #666;padding-bottom: 20rpx;">{{info.vod_actor}}
						</view>
					</scroll-view> -->
				</view>
				<view style="padding:0 30rpx;">
					<view class="module_tittle">简介</view>
					<rich-text :nodes="info.vod_content"></rich-text>
				</view>
			</view>
		</uv-popup>
		<uv-popup v-if="info" ref="showList" :overlay="false" :safeAreaInsetBottom="false">
			<view :style="playerReact?`height:calc(100vh - ${playerReact.top}px)`:''"
				style="height: 100vh;overflow: scroll;">
				<view class="poptittle" @click="showList=false">
					<view class="module_tittle">选集列表</view>
					<view><uni-icons type="bottom" size="40rpx"></uni-icons></view>
				</view>
				<view
					style="padding-left: 30rpx;display: flex;align-items: center;flex-wrap: wrap;padding-bottom: 40rpx;">
					<view
						style="display: inline-block;width: calc(50vw - 38rpx);margin-right: 20rpx;margin-bottom: 20rpx;"
						v-for="b in info.vod_play_url" :key="b.url">
						<view @click="playIn(b)" :class="{'pickButton_Checked':b.url==playurl}" class="pickButton">
							{{b.name}}
						</view>
					</view>
				</view>
			</view>
		</uv-popup>
		<view v-if="showH5Tips==2" @click="toAPP"
			style="position: fixed;bottom: 60rpx;left: 50%;transform: translateX(-50%);box-sizing: border-box;">
			<view
				style="background:linear-gradient(to right, rgb(3, 200, 212), rgb(2, 220, 231));border-radius: 80rpx;padding:8rpx 20rpx;box-shadow: rgba(0, 0, 0, 0.5) 0px 3rpx 8rpx;">
				<view style="display: flex;align-items: center;justify-content: center;">
					<image style="width: 60rpx;height: 60rpx;flex-shrink: 0;" src="../../static/logo.png" mode="">
					</image>
					<view style="flex-shrink: 0;font-size: 25rpx;color: #fff;padding-left: 10rpx;">打开APP享受更好的体验</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/static/api.js'
	import userInfo from '@/static/userInfo.js'
	export default {
		data() {
			return {
				info: null,
				videoContext: null,
				showControls: true,
				playurl: null,
				playName: null,
				showInfo: false,
				playerReact: null,
				showList: false,
				playHistry: [],
				playindex: 0,
				seek: 0,
				infoIndex: 0,
				showPostComment: false,
				showtabs: [{
					name: '详情'
				}, {
					name: '评论'
				}],
				Keyboard: null,
				Comment: "",
				userinfo: null,
				Comments: [],
				sameVideos: [],
				playTime: null,
				showH5Tips: 0
			}
		},
		watch: {
			playurl(u) {
				setTimeout(() => {
					this.videoContext.play()
				}, 500)
			},
			showInfo(b) {
				if (!this.checkApp('简介')) {
					this.showInfo = false
					return
				}
				if (b) this.$refs.showInfo.open('bottom');
				else this.$refs.showInfo.close();
			},
			showList(b) {
				if (!this.checkApp('选集')) {
					this.showList = false
					return
				}
				if (b) this.$refs.showList.open('bottom');
				else this.$refs.showList.close();
			},
			showPostComment(b) {
				if (b) this.$refs.showPostComment.open('bottom');
				else this.$refs.showPostComment.close();
			},
			infoIndex(v) {
				if (!this.checkApp('评论')) {
					this.infoIndex = 0
					return
				}
			}
		},
		onUnload() {
			if (this.playTime?.currentTime) {
				userInfo.upWatchHistry({
					vod_id: this.info.vod_id,
					vod_img: this.info.vod_pic,
					vod_name: this.info.vod_name,
					currentTime: this.playTime.currentTime,
					duration: this.playTime.duration,
					episode: this.playindex,
					episode_name: this.playName,
					watchTime: new Date().getTime(),
				})
			}
		},
		methods: {
			checkApp(msg) {
				if (this.showH5Tips != 0) {
					uni.showToast({
						title: '正在前往APP查看' + msg,
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => this.toAPP(), 1000)
					return false
				}
				return true
			},
			toAPP() {
				uni.navigateTo({
					url: '/pages/toAPP/toAPP'
				})
			},
			toInfoPage(e) {
				if (!this.checkApp('其他剧集')) {
					return
				}
				//跳转播放
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id=' + e.vod_id
				})
			},
			timeFormat(time, fmt = 'yyyy-MM-dd hh:mm:ss', targetTimezone = 8) {
				if (!time) {
					return "";
				}
				// 其他更多是格式化有如下:
				// yyyy-MM-dd hh:mm:ss|yyyy年MM月dd日 hh时MM分等,可自定义组合
				let date;
				if (typeof time === "number") {
					if (time.toString().length == 10) time *= 1000;
					date = new Date(time);
				} else {
					date = time;
				}

				const dif = date.getTimezoneOffset();
				const timeDif = dif * 60 * 1000 + (targetTimezone * 60 * 60 * 1000);
				const east8time = date.getTime() + timeDif;

				date = new Date(east8time);
				let opt = {
					"M+": date.getMonth() + 1, //月份   
					"d+": date.getDate(), //日   
					"h+": date.getHours(), //小时   
					"m+": date.getMinutes(), //分   
					"s+": date.getSeconds(), //秒   
					"q+": Math.floor((date.getMonth() + 3) / 3), //季度   
					"S": date.getMilliseconds() //毫秒   
				};
				if (/(y+)/.test(fmt)) {
					fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
				}
				for (let k in opt) {
					if (new RegExp("(" + k + ")").test(fmt)) {
						fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (opt[k]) : (("00" + opt[k]).substr(("" +
							opt[k]).length)));
					}
				}
				return fmt;
			},
			popCommentBox() {
				if (this.showH5Tips != 0) {
					uni.showToast({
						title: '请前往APP参与讨论',
						duration: 2000,
						icon: 'none'
					});
					setTimeout(() => this.toAPP(), 1000)
					return
				}
				if (this.userinfo && this.userinfo.user) {
					this.showPostComment = true
					return;
				}
				uni.showToast({
					title: '尚未登录',
					duration: 2000,
					icon: 'error'
				});
			},
			postComment() {
				let msg = ''
				if (this.Comment.length > 60) {
					msg = '评论不得超过60字'
				}
				if (this.Comment.length < 5) {
					msg = '评论不得小于5个字'
				}
				if (msg) {
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'none'
					});
					return;
				}
				api.postComment({
					vid: this.info.vod_id,
					userToken: this.userinfo.token,
					com: this.Comment
				}).then(
					res_ => {
						if (res_.data.code != 200) {
							uni.showToast({
								title: res_.data.msg,
								duration: 2000,
								icon: 'none'
							});
							return
						}
						this.Comment = ''
						api.getComment({
							vid: this.info.vod_id
						}).then(res => {
							this.Comments = res.data.data
						})
					})
			},
			played() {
				console.log('播放了')
				if (this.seek != 0) {
					this.videoContext.seek(parseInt(this.seek))
					this.seek = 0
				}
				let this_ = this
			},
			playIn(e) {
				let this_ = this
				if (e.index) {
					this.playindex = e.index
				} else {
					for (let i in this_.info.vod_play_url) {
						if (this_.info.vod_play_url[i].url == e.url) {
							this_.playindex = parseInt(i)
							break;
						}
					}
				}
				if (this_.playindex > 0 && !this.checkApp('其他剧集')) {
					return
				}
				this.playurl = e.url
				this.playName = e.name
			},
			timeupdate(e) {
				this.playTime = {
					currentTime: e.detail.currentTime,
					duration: e.detail.duration,
				}
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			videoErrorCallback: function(e) {
				console.log('视频错误信息:')
				console.log(e.target.errMsg)
			},
			searchSame() {
				api.getList({
					count: 18,
					page: 0,
					vod_id: this.info.vod_id,
					searchSame: this.info.vod_pubdate,
					type_id: this.info.type_id
				}).then(res_ => {
					let res = res_.data.data.list
					if (res.length == 0) {
						this.sameVideos = null
						return
					}
					this.sameVideos = res
				})
			}
		},
		onReady: async function(res) {
			this.userinfo = await userInfo.userInfo()
			// this.userinfo = getApp().globalData.userInfo
			this.videoContext = uni.createVideoContext('myVideo')

			const query = uni.createSelectorQuery();
			query.select('#cps').boundingClientRect(data => {
				this.playerReact = data
			}).exec();

			let this_ = this
			uni.onKeyboardHeightChange(res => {
				this_.Keyboard = res
				if (res.height == 0) this_.showPostComment = false
			})
		},
		onLoad: function(option) {
			//#ifdef H5
			this.showH5Tips = 2
			//#endif 
			let this_ = this
			if (!option.id) {
				uni.reLaunch({
					url: "/pages/index/index"
				});
				return;
			}
			api.getList({
				count: 1,
				page: 0,
				vod_id: option.id
			}).then(async res_ => {
				let v = res_.data.data.list[0]
				v.vod_play_url = JSON.parse(v.vod_play_url)
				this_.info = v
				this_.searchSame()

				if (this.showH5Tips != 0) {
					this_.seek = 0
					this_.playIn(v.vod_play_url[0])
					return
				}

				let playHistry = await userInfo.watchHistry(option.id)
				if (playHistry.length == 1) {
					playHistry = playHistry[0]
					this_.playHistry = playHistry
					this_.seek = playHistry.currentTime
					this_.playIn(v.vod_play_url[playHistry.episode])
				} else {
					this_.seek = 0
					this_.playIn(v.vod_play_url[0])
				}
			})
			api.getComment({
				vid: option.id
			}).then(res_ => {
				this_.Comments = res_.data.data
			})
		}
	}
</script>

<style>
	* {
		/* color: rgb(3, 0, 35); */
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background: #000;
	}

	.popBox {}

	.myVideo {
		width: 100vw;
		height: 56.25vw;
	}

	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}

	.pickButton {
		background: rgb(246, 246, 246);
		border-radius: 10rpx;
		padding: 15rpx 20rpx;
		transition: 0.2s;
		outline: none;
		border: 0;
		text-align: center;
		color: #666;
		font-size: 30rpx;

	}

	.pickButton_Checked {
		color: rgb(16, 174, 170);
		background: rgb(229, 249, 248);
		transition: 0.2s;
	}

	.module_tittle {
		font-size: 30rpx;
		padding: 20rpx 0;
		font-weight: 800;
	}

	rich-text {
		font-size: 25rpx;
		color: #666;
	}

	.poptittle {
		display: flex;
		justify-content: space-between;
		padding: 30rpx 30rpx;
		position: sticky;
		top: 0;
		background: #fff;
	}

	.poptittle .module_tittle {
		padding: 0;
	}

	.tabpage {
		font-size: 28rpx;
		color: #999;
	}

	.tabpage_in {
		font-size: 30rpx;
		color: rgb(3, 0, 35);
		font-weight: bold;
		position: relative;
		/* top: -5rpx; */
	}


	.vList {
		display: flex;
		align-items: center;
		// justify-content: space-between;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.vListItem {
		width: calc(calc(50% - 7rpx * 2) * 2 / 3 - 7rpx);
		margin: 7rpx;
		margin-bottom: 30rpx;
		overflow: hidden;
		border-radius: 20rpx;
		position: relative;
	}

	.itemImage {
		width: calc(50vw * 2 / 3);
		height: calc(65vw * 2 / 3);
	}

	.itemInfo {
		position: absolute;
		padding: 10rpx 10rpx;
		bottom: 0;
		color: aliceblue;
		background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 255));
		width: 100%;
		padding-top: 40px;
	}

	.itemTittle {
		font-weight: 800;
		font-size: 25rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 90%;
	}

	.itemIns {
		width: 90%;
		font-size: 20rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		margin-bottom: 5rpx;
	}
</style>